<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>


	<div class="col-md-3 col-sm-3 col-xs-12 ">
		<!-- 机构信息树 -->
		<div class="boxleft">
			<div class="panel-default">
				<div class=" panel-heading">机构组织</div>

				<div class="col-md-12 col-sm-12 col-xs-12 text-center ">
					<ul id="treeDemo" class="ztree"></ul>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-9 col-sm-9 col-xs-12">
		<div>
			<div class="panel-body" style="padding-bottom: 0px;">
				<div class="panel panel-default">
					<div class="panel-heading">查询条件</div>
					<div class="panel-body">
						<form id="formSearch" class="form-horizontal">
							<div class="col-sm-4 mar">
								<div class="input-group">
									<span class="input-group-addon">机构编号</span> <input
										id="officeId1" name="id" class="form-control" type="text">
								</div>
							</div>
							<div class="col-sm-4 mar">
								<div class="input-group">
									<span class="input-group-addon">机构名称</span> <input
										id="officeName1" name="name" class="form-control" type="text">
								</div>
							</div>

						</form>
						<div class="col-sm-4 mar">
							<button id="btn_search" type="button" class="btn btn-default">
								<span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询
							</button>
						</div>
					</div>
				</div>

				<div id="toolbar" class="btn-group">
					<button id="btn_add" type="button" class="btn btn-default">
						<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
					</button>
					<button id="btn_update" type="button" class="btn btn-default">
						<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
					</button>
					<button id="btn_delete" type="button" class="btn btn-default">
						<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
					</button>
				</div>
				<table id="tb_office"></table>
			</div>
		</div>
		<!-- .boxright -->
	</div>
	<!-- 增加模态框 -->
	<!-- 修改模态框 -->
	<div class="modal fade" id="officeInfoModal" tabindex="-1"
		role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title">机构信息</h4>
				</div>
				<form id="officeInfoForm">
					<div class="">
						<div style="height: auto; margin-bottom: 10px;">
							<div class="col-sm-6 mar">
								<div class="input-group">
									<span class="input-group-addon">机构名称</span> <input
										id="officeName2" name="name" class="form-control" type="text">
								</div>
							</div>

							<div class="col-sm-6 mar">
								<div class="input-group">
									<span class="input-group-addon">备注</span> <input id="remarks"
										name="remarks" class="form-control" type="text">
								</div>
							</div>
							<!-- 获取机构的父Id -->
							<input id="parentId" name="parentId" type="hidden">
							<input id="officeId2" name="id" type="hidden">
							<!-- 判断增加或修改的 -->
							<input id="modalAct" type="hidden">
						</div>
						<div class="col-md-12 col-sm-12 col-xs-12 text-center"
							style="border-bottom: 1px solid #e5e5e5; padding-bottom: 15px; margin-bottom: 15px;">
						</div>
					</div>

					<div class="modal-footer" style="border: 0px;">
						<input type="button" id="submitOfficeInfo" class="btn btn-success"
							value="保存">
						<button type="button" class="btn btn-warning" data-dismiss="modal">取消</button>
					</div>

				</form>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>



<script type="text/javascript">
	//实现模态框的拖动
	$(document).on("show.bs.modal", ".modal", function() {
		$(this).draggable({
			handle : ".modal-header" // 只能点击头部拖动
		});
		$(this).css("overflow", "hidden"); // 防止出现滚动条，出现的话，你会把滚动条一起拖着走的
	});
	//清除模态框 表单数据
	$('#officeInfoModal').on('hidden.bs.modal', function() {

		$("#officeInfoForm")[0].reset();
	});
	//初始化页面
	$(function() {
		showOfficeInfo();

	})
	//显示页面信息
	function showOfficeInfo() {
		showOffice();
		//1.初始化Table
		var oTable = new TableInit();
		oTable.Init();
	}
	var TableInit = function() {
		var oTableInit = new Object();
		//初始化Table
		
		oTableInit.Init = function() {
			var $table = $("#tb_office");
			$table.bootstrapTable("refresh");
			$table.bootstrapTable({
						url : 'office/list', //请求后台的URL（*）

						striped : true,
						sidePagenation : 'server',
						responseHandler : oTableInit.responseHandler,
						idField : 'id',
						singleSelect : true,
						columns : [ {
							field : 'ck',
							checkbox : true
						}, {
							field : 'name',
							title : '部门名称'
						}, {
							field : 'id',
							title : '部门编号'
						}, {
							field : 'remarks',
							title : '备注'
						} ],
						treeShowField : 'name',
						parentIdField : 'parentId',
						onLoadSuccess : function(data) {
							//console.log("<______________")
							//console.log(data);
							$table
									.treegrid({
										initialState : 'collapsed',//收缩
										treeColumn : 1,//指明第几列数据改为树形
										expanderExpandedClass : 'glyphicon glyphicon-triangle-bottom',
										expanderCollapsedClass : 'glyphicon glyphicon-triangle-right',
										onChange : function() {
											//console.log("------------>")
											$table.bootstrapTable('resetWidth');
										}
									});
						}

					});
		};

		oTableInit.responseHandler = function(result) {
			//console.log("============")
			//console.log(result);
			return result.result

		};

		return oTableInit;
	};

	//删除机构
	$("#btn_delete").click(function() {
		var officeId = $('input[type=checkbox]:checked');	
		if (officeId.length == 0) {
			alert("请选择添加机构的位置")
		} else {			
			if(confirm("确定要删除吗？")){			
				submitOfficeInfo("office/delete",{"id" : officeId.val()})
			}
		}
						
	})
	//增加机构
	$("#btn_add").click(function() {
		var officeId = $('input[type=checkbox]:checked');
		console.log(officeId.val())
		if (officeId.length == 0) {
			alert("请选择添加机构的位置")
		}  else {
			$("#parentId").val(officeId.val());
			$("#modalAct").val("add");
			$("#officeInfoModal").modal("show");
		}
	});
	//修改机构
	$("#btn_update").click(function() {
		var officeId = $('input[type=checkbox]:checked');
		if (officeId.length == 0) {
			alert("请选择添加机构的位置")
		} else {
			preUpdate(officeId.val());
			$("#modalAct").val("update");
			$("#officeInfoModal").modal("show");
		}
	});
	//查询修改机构的原始信息
	function preUpdate(id){
		$.ajax({
			url:"office/preUpdate",
			data:{"id" : id},
			type : "post",
			dataType : "json",
			success : function(data) {
				if (data.status == 200) {
					var r = data.result;
					console.log(r)
					$("#officeName2").val(r.name);
					$("#remarks").val(r.remarks);
					$("#parentId").val(r.parentId);
					$("#officeId2").val(r.id);
				}
			}
		});
	}
	
	$("#submitOfficeInfo").click(function() {
		var act = $("#modalAct").val();
		var data = $("#officeInfoForm").serialize();
		if (act == "add") {
			var url = "office/add";
			
		} else {
			var url = "office/update";
		}
		submitOfficeInfo(url, data);
	});
	//提交机构信息
	function submitOfficeInfo(url, data) {
		$.ajax({
			url : url,
			data : data,
			type : "post",
			dataType : "json",
			success : function(data) {
				if (data.status == 200) {
					showOfficeInfo();
					$("#officeInfoModal").modal("hide");
				}
			}
		});
	}
	//
	//配置节点参数
	var setting = {
		check : {
			enable : false
		//每个节点上是否显示 CheckBox
		},
		data : {
			key : {
				title : "name",
				name : "name"
			},
			simpleData : {//简单数据模式
				enable : true,
				idKey : "id",
				pIdKey : "parentId",
				rootPId : null
			}
		},
		callback : {

		}
	};

	//显示机构信息树
	function showOffice() {
		$.ajax({
			url : "office/list",
			type : 'post',
			dataType : 'json',
			success : function(data) {
				if (data.status == 200) {
					var type = data.result;
					console.log(type)
					$.fn.zTree.init($("#treeDemo"), setting, type);

				}
			}
		});
	}
</script>
</html>